<!--
Created by IntelliJ IDEA.
User: iulianacosmina
Date: 2019-07-14
Time: 11:43
-->
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">

<head th:replace="~{templates/layout :: pageTitle('Create Singer Page')}"></head>

<body>
<div class="container">
  <header th:replace="~{templates/layout :: pageHeader}" ></header>

  <header th:replace="~{templates/layout :: pageMenu}" ></header>

  <section th:fragment="~{templates/layout :: pageContent}">
    <div class="content">  <!-- content -->
      <h4 th:text="#{command.create} + ' ' + #{singer.new}">CREATE</h4>
      <div class="container col-lg-12">
        <form name="create_singer" th:action="@{/singers}" th:object="${singerForm}" th:method="post" class="col p-3" enctype="multipart/form-data">
          <div class="row mb-1">
            <label for="firstName" th:text="#{label.Singer.firstname} + ':'" class="col-sm-4 form-label">FN:</label>
            <div class="col-sm-8">
              <input type="text" th:field="*{firstName}" class="form-control"/>
              <span th:if="${#fields.hasErrors('firstName')}" class="error" th:errors="*{firstName}">MISSING FN</span>
            </div>
          </div>

          <div class="row mb-1">
            <label for="lastName" th:text="#{label.Singer.lastname} + ':'" class="col-sm-4  form-label">LN:</label>
            <div class="col-sm-8">
              <input type="text" th:field="*{lastName}" class="form-control"/>
              <span th:if="${#fields.hasErrors('lastName')}" class="error" th:errors="*{lastName}">MISSING LN</span>
            </div>
          </div>

          <div class="row mb-1">
            <label for="birthDate" th:text="#{label.Singer.birthDate} + ':'" class="col-sm-4  form-label">BD:</label>
            <div class="col-sm-8">
              <input type="date" th:field="*{birthDate}" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
              <span th:if="${#fields.hasErrors('birthDate')}" class="error" th:errors="*{birthDate}">MISSING BD</span>
            </div>
          </div>
          <div class="row mb-1">
            <label for="file" th:text="#{label.Singer.photo} + ':'" class="col-sm-4  form-label">PH</label>
            <div class="col-sm-8">
              <input type="file" th:field="*{file}" name="file" id="file" class="form-control"/>
            </div>
          </div>

          <div class="form-group mb-1 align-items-end">
            <input type="submit" th:value="#{command.save}" id="saveButton" class="btn btn-primary"/>
          </div>
        </form>
        <p th:if="${message ne null}" th:text="${message}" class="error"></p>
        <div class="form-group mb-1 align-items-end">
          <a href="#" th:href="@{/singers}" th:text="#{command.cancel}"> CANCEL</a>
        </div>
      </div>
    </div> <!-- content -->
  </section>

  <footer th:replace="~{templates/layout :: pageFooter}" ></footer>
</div>
</body>
</html>